<template>
  <b-layout id="new-law-detail" class="new-law-detail" placement="top" space="30px" :breadCrumb="true">
    <div slot="last" class="new-law-detail-content"
      v-loading="loading"
      element-loading-text="加载中..."
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(255, 255, 255, 0.7)"
    >
      <div class="new-law-detail-content-html">
        <el-row class="new-law-detail-table">
          <el-col :span="12" v-for="(item, index) in tableCells" :key="index">
            <span>【{{item.title}}】</span>
            <span>{{detailData[item.props] || '--'}}</span>
          </el-col>
        </el-row>
        <div v-html="detailData.law_content" class="v-html"></div>
        <div class="btn">
          <el-button size="mini" @click="download">
            <i class="iconfont law-icondownload"></i>
            下载
          </el-button>
        </div>
      </div>
    </div>
  </b-layout>
</template>

<script>
import bLayout from '@/layouts/BinaryLayout'
import { mapGetters } from 'vuex'
export default {
  name: 'new-law-express-detail',
  components: {
    bLayout
  },
  data () {
    return {
      detailData: {},
      loading: false,
      id: this.$route.params.id,
      tableCells: [
        { props: 'org', title: '发文部门' },
        { props: 'file_order', title: '发文字号' },
        { props: 'publish_date', title: '发布日期' },
        { props: 'put_at', title: '实施日期' },
        // { props: '', title: '时效性' },
        { props: 'law_level', title: '效力级别' }
        // { props: 'biz_type', title: '法规类别' }
      ]
    }
  },
  computed: {
    ...mapGetters({
      token: 'token'
    })
  },
  mounted () {
    this.lawDetail()
  },
  methods: {
    lawDetail () {
      this.loading = true
      this.$api.lawDetail(this.id).then(res => {
        this.detailData = res.data
        this.loading = false
      }).catch(e => {
        this.loading = false
      })
    },
    download () {
      let downloadURL = this.$api.downloadLawDetailURL + `?law_id=${this.id}&_token=${this.token}`
      window.open(downloadURL)
    }
  }
}
</script>

<style lang="scss" scoped>

#new-law-detail{
  height: 100%;
  box-sizing: border-box;
  div {
    box-sizing: border-box;
  }
}
.new-law-detail-content{
  height: 100%;
  padding: 20px;
  background: $box-bg-color;
  position: relative;
  .new-law-detail-content-html{
    border: 1px solid $box-border-color;
    overflow-y: auto;
    padding: 10px 20px 50px 20px;
    height: 100%;
    border-radius: 4px;
    .new-law-detail-table{
      font-size: $fs-m;
      padding-bottom: 10px;
      >.el-col{
        padding: 10px 0;
      }
      border-bottom: 1px solid $box-border-color;
    }
    .v-html{
      padding-top: 20px;
      font-size: unset;
    }
    .btn{
      background: transparent;
      position: absolute;
      bottom: 40px;
      right: 50px;
      i {
        margin-right: 3px;
      }
    }
  }
}
</style>

<style lang="scss">

#new-law-detail /deep/ {
  span{
    color: $default-text-color !important;
    background: transparent !important;
  }
  a{
    color: $default-text-color !important;
    background: transparent !important;
    pointer-events:none !important;
    text-decoration: none;
  }
  table{
    color: $default-text-color !important;
    background: transparent !important;
    td{
      border: 1px solid $default-text-color !important;
    }
  }
  p{
    color: $default-text-color !important;
    background: transparent !important;
    span{
      color: $default-text-color !important;
      background: transparent !important;
    }
    >span{
      background: transparent !important;
    }
  }
  b >span{
    font-weight: 500 !important;
  }
}
</style>
